<template>
	<view>
		<!-- 商品主图 -->
		<view class="zt-section bg-white"><image :src="pItem.pictUrl" mode="aspectFill"></image></view>
		<!-- 商品信息 -->
		<view class="pitem-section bg-white">
			<view class="priceInfo">
				<view>
					<text class="rmb text-red">¥</text>
					<text class="zkprice">{{ pItem.zkFinalPrice | Fixed2 }}</text>
					<text class="rmb text-gray margin-left-sm">¥</text>
					<text class="yprice">{{ pItem.reservePrice | Fixed2 }}</text>
				</view>
				<view class="text-gray">
					<text class="padding-right">销量: {{ pItem.volume }}</text>
					|
					<text class="padding-left">{{ pItem.provcity }}</text>
				</view>
			</view>
			<view class="titleInfo">
				<text class="type">{{ pItem.userType | shopType }}</text>
				<text class="title">{{ pItem.title }}</text>
			</view>
			<view class="shopInfo">
				<view class="text-orange">{{ pItem.couponInfo }}</view>
				<view class="flex">
					<icon-font type="shop" size="18" color="#aaaaaa"></icon-font>
					<text class="padding-left-xs">{{ pItem.shopTitle }}</text>
				</view>
			</view>
			<view class="juanInfo" v-if="pItem.couponAmount != null">
				<view>
					<view>
						￥
						<text class="text-xl text-bold ">{{ pItem.couponAmount }}优惠券</text>
					</view>
					<view class="text-sm">使用时间：{{ pItem.couponStartTime | formatShortDate }} - {{ pItem.couponEndTime | formatShortDate }}</view>
				</view>
				<view class="text-bold" @tap="navTaobao">立即领券</view>
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="margin-top-sm bg-white" v-if="materialList.length > 0">
			<view class="flex justify-center padding-sm">—————— 猜你喜欢 ——————</view>
			<al-goods :list="materialList"></al-goods>
		</view>
		<!-- 商品详情 -->
		<view class="margin-top-sm bg-white">
			<view class="flex justify-center padding-sm">—————— 商品详情 ——————</view>
			<view v-for="(item, index) in pItem.smallImages" :key="index" class="pading-top"><image :src="item" mode="widthFix" style="width: 100%;"></image></view>
		</view>
		<view style="height: 120rpx;"></view>
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<navigator url="/pages/index/main" open-type="switchTab" class="p-b-btn">
				<icon-font type="home" size="24" color="#bfbfbf"></icon-font>
				<text class="text-grey">首页</text>
			</navigator>
			<view class="p-b-btn" @tap="goCollect">
				<icon-font :type="collectType" size="24" :color="collectColor"></icon-font>
				<text class="text-grey">{{ collectText }}</text>
			</view>
			<view class="action-btn-group">
				<view class="action-btn" @tap="goShare">
					<view>
						<view class="padding-left-sm">立即分享</view>
						<view class="text-xl">赚￥{{ pItem.commissionAmount | Fixed2 }}</view>
					</view>
				</view>
				<!-- #ifdef APP-PLUS -->
				<view class="action-btn" @tap="navTaobao">
					<view>
						<view class="padding-left-sm">立即购买</view>
						<view class="text-xl">省￥{{ pItem.commissionAmount, pItem.couponAmount | commissionCoupon }}</view>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="action-btn" @tap="copyWord">
					<view><view class="padding-left-sm">复制淘口令</view>
					<view class="text-xl">省￥{{ pItem.commissionAmount, pItem.couponAmount | commissionCoupon }}</view></view>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<dialog-box :modalName="modalName" @cancelLogin="cancelLogin" @login="login"></dialog-box>
		<search-clipboard :searchModal="searchModal" @resetModal="resetSearchModal"></search-clipboard>
		<loading :loadModal="loadModal"></loading>
	</view>
</template>

<script>
import alGoods from '../../components/al-goods.vue';
var _self; //this容器
export default {
	components: {
		alGoods
	},
	data() {
		return {
			pItem: [], //产品对象
			colloectId: '',
			materialList: [], //猜你喜欢
			loadModal: false,
			modalName: '', //对话框
			searchModal:this.$util.initClipboard()
		};
	},
	computed: {
		collectType() {
			return this.colloectId != '' ? 'collected' : 'collect';
		},
		collectColor() {
			return this.colloectId != '' ? '#e83844' : '#bfbfbf';
		},
		collectText() {
			return this.colloectId != '' ? '已收藏' : '收藏';
		}
	},
	onLoad(options) {
		_self = this;
		_self.pItem = JSON.parse(decodeURIComponent(options.cnt));
		_self.isColloected();
		_self.getmaterialList();
	},
	onShow(){
		setTimeout(() => {
			_self.$util.searchClipboard(_self.$store.state.searchContent).then(res => {
				_self.searchModal = res;
			});
		}, 200);
	},
	methods: {
		resetSearchModal() {
			_self.searchModal = _self.$util.initClipboard();
		},
		isColloected() {
			//是否已经收藏
			if (_self.$util.Landing()) {
				try {
					const param = {
						itemId: _self.pItem.itemId
					};
					_self.$http.httpRequest('userFavorite/details', param, true).then(res => {
						if (res._tranStatus) {
							if (res._data) {
								_self.colloectId = res._data.id;
							}
						}
					});
				} catch (e) {
					return Promise.reject(e);
				}
			}
		},
		getmaterialList() {
			//相识推荐
			try {
				const param = {
					itemId: _self.pItem.itemId
				};
				_self.$http.httpRequest('taobao/product/similar', param, false).then(res => {
					if (res._tranStatus) {
						_self.materialList = res._data.list;
					}
				});
			} catch (e) {
				return Promise.reject(e);
			}
		},
		goCollect() {
			//收藏或取消收藏商品
			if (_self.$util.Landing()) {
				if (_self.colloectId != '') {
					//取消收藏
					const param = {
						id: _self.colloectId
					};
					_self.loadModal = true;
					_self.$http.httpRequest('userFavorite/delete', param, true).then(res => {
						_self.loadModal = false;
						if (res._tranStatus) {
							_self.$util.msg('取消收藏成功');
							_self.colloectId = '';
						} else {
							_self.$util.msg(res._exceptionLocalizedMessage);
						}
					});
				} else {
					//收藏
					const param = {
						itemId: _self.pItem.itemId,
						title: _self.pItem.title,
						userType: _self.pItem.userType,
						pictUrl: _self.pItem.pictUrl,
						smallImages: _self.pItem.smallImages,
						reservePrice: _self.pItem.reservePrice,
						zkFinalPrice: _self.pItem.zkFinalPrice,
						couponInfo: _self.pItem.couponInfo,
						couponStartTime: _self.pItem.couponStartTime,
						couponEndTime: _self.pItem.couponEndTime,
						couponAmount: _self.pItem.couponAmount,
						commissionAmount: _self.pItem.commissionAmount,
						provcity: _self.pItem.provcity,
						shopTitle: _self.pItem.shopTitle,
						volume: _self.pItem.volume,
						promotedUrl: _self.pItem.promotedUrl
					};
					_self.loadModal = true;
					_self.$http.httpRequest('userFavorite/add', param, true).then(res => {
						_self.loadModal = false;
						if (res._tranStatus) {
							_self.$util.msg('收藏成功');
							_self.colloectId = res._data.id;
						} else {
							_self.$util.msg(res._exceptionLocalizedMessage);
						}
					});
				}
			}else{
				_self.modalName = 'login';
			}
		},
		goShare() {
			if (_self.$util.Landing()) {
				if (_self.$util.ExistRelationId()) {
					//跳转至分享页面
					uni.navigateTo({
						url: 'share?cnt=' + encodeURIComponent(JSON.stringify(_self.pItem))
					});
				}
			} else {
				_self.modalName = 'login';
			}
		},
		navTaobao() {
			//立即购买 去 淘宝
			if (_self.$util.Landing()) {
				if (_self.$util.ExistRelationId()) {
					//#ifdef APP-PLUS
					let plug = uni.requireNativePlugin('UZK-Alibcsdk');
					let url = _self.pItem.promotedUrl + '&relationId=' + _self.$util.getRelationId();
					plug.init(result => {
						plug.openurl({
							url: url,
							linkkey: 'taobao',
							adzoneid: '103062550066',
							pid: 'mm_1159700186_1658850404_110381300098',
							nativeFailedMode: 'download',
							appkey: '29510703',
							opentype: 'native'
						});
					});
					//#endif
				}
			} else {
				_self.modalName = 'login';
			}
		},
		copyWord() {
			//复制淘口令
			//#ifdef MP-WEIXIN
			if (_self.$util.Landing()) {
				_self.$util.taoKouLingCreate(_self.pItem.promotedUrl).then(res => {
					uni.setClipboardData({
						data: res
					});
				});
			} else {
				_self.modalName = 'login';
			}
			//#endif
		},
		cancelLogin() {
			//取消登录
			_self.modalName = '';
		},
		login() {
			//确认登录
			_self.modalName = '';
			uni.navigateTo({
				url: '../access/main'
			});
		}
	}
};
</script>

<style lang="scss">
.zt-section {
	position: relative;
	display: flex;
	justify-content: center;
	align-content: center;
	height: 750rpx;
	overflow: hidden;
	image {
		width: 100%;
		height: 100%;
	}
}

.pitem-section {
	padding: 30rpx;
	.rmb {
		padding-left: 5rpx;
		padding-right: 5rpx;
	}
	.priceInfo {
		display: flex;
		justify-content: space-between;
		.zkprice {
			font-size: 36rpx;
			color: #e54d42;
			font-weight: bold;
		}
		.yprice {
			color: #aaaaaa;
			text-decoration: line-through;
		}
	}
	.titleInfo {
		margin-top: 20rpx;
		.title {
			font-weight: bold;
		}
		.type {
			background-color: #EC343B;
			color: #ffffff;
			padding: 2rpx 10rpx;
			margin-right: 10rpx;
		}
	}
	.shopInfo {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	.juanInfo {
		height: 110rpx;
		margin-top: 20rpx;
		background-image: linear-gradient(45deg, #ec79be, #e83844);
		color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-radius: 6rpx;
	}
}

/* 底部操作菜单 */
.page-bottom {
	position: fixed;
	left: 0rpx;
	bottom: 0rpx;
	z-index: 9995;
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	height: 120rpx;
	box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
	background-color: #ffffff;
	.p-b-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: $font-sm;
		width: 110rpx;
		height: 100rpx;
	}
	.action-btn-group {
		display: flex;
		height: 100rpx;
		border-radius: 80px;
		overflow: hidden;
		box-shadow: 1px 2px 5px #d03032;
		background: linear-gradient(to right, #fe7179, #e83844);
		margin-left: 10rpx;
		margin-right: 10rpx;
		position: relative;
		&:after {
			content: '';
			position: absolute;
			top: 50%;
			right: 50%;
			transform: translateY(-50%);
			height: 28rpx;
			width: 0;
			border-right: 1px solid rgba(255, 255, 255, 0.5);
		}
		.action-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 300rpx;
			height: 100%;
			font-size: $font-base;
			color: #fff;
			padding: 0;
			border-radius: 0;
			background: transparent;
		}
	}
}
</style>
